<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web模板示例展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="/src/style.css" rel="stylesheet" />
    <script type="module" src="./src/main.js"></script>
  </head>
  <body class="min-h-screen bg-gray-50">
    <div id="app" class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <header class="mb-12 text-center">
        <h1 class="mb-4 text-4xl font-bold text-gray-800">Web模板示例展示</h1>
        <p class="text-lg text-gray-600">探索各种精美的网页模板设计</p>
      </header>

      <!-- 示例展示区域 -->
      <div
        id="examples-container"
        class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
      >
        <!-- 示例卡片将通过JavaScript动态生成 -->
      </div>
    </div>
  </body>
</html>
